
import { Button, Form, Input, Card, message } from 'antd';
//路由跳转
import { useNavigate, useParams } from 'react-router-dom';
import style from '../index.module.css'

//引入添加医院列表数据类型
import { addHospitalRequestType } from "@/api/hospital/model/hospitalSetTypes";

//引入请求
// import { addHospitalRequest } from '../../../../api/hospital/hospitalSet'
import {
  addHospitalRequest,
  getHosSetFromIdRequest,
  changeHosSetRequest,
} from '@/api/hospital/hospitalSet'
import { useEffect } from 'react';
import { useForm } from 'antd/lib/form/Form';

export default function AddOrUpdateHosSet() {

  const navigate = useNavigate()
  //通过params传参拿到
  //{id} 解构id  useParams() 接受Params参数
  //当前列表选项的ID
  // console.log(useParams(), "useParams()");
  // 对象
  // console.log(useParams());
  const { id } = useParams()
  // console.log(id);

  const [form] = useForm()

  //根据Id获取原列表项数据
  useEffect(() => {
    //判断ID的是否存在
    if (id) {
      const getHosByID = async () => {

        const result = await getHosSetFromIdRequest(id)
        // console.log(result,"result");
        // 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入）
        form.setFieldsValue(result);
      }
      getHosByID()
    }
  })
  // //新增医院事件函数1
  // const addHosFinishHandle = (fieldValue: addHospitalRequestType) => {
  //   //表单组件收集到的每个输入框内容的集合
  //   // console.log(fieldValue,"fieldValue");
  //   // console.log("id",id);
  //   //提供id来判断是否是提交请求
  //   if (id) {
  //     //如果id存在说明是再修改列表 则给当前的数据添加id属性值为ID
  //     fieldValue.id = id
  //     //发生更新列表请求
  //     changeHosSetRequest(fieldValue)
  //     //添加完数据回转到列表设置页
  //     navigate('/syt/hospital/hospitalSet')
  //   }
  //   //不走if 则发送新增列表请求
  //   addHospitalRequest(fieldValue)
  //   //新增完数据回转到列表设置页
  //   navigate('/syt/hospital/hospitalSet')
  //   return 11
  // }
  //新增医院事件函数2
  const addHosFinishHandle = (fieldValue: addHospitalRequestType) => {
    // console.log(fieldValue);
    // 判断当前组件中是否有id，有就是修改，没有就是新增
    if (id) {
      //展开表单收集的对象 并添加一个id属性
      changeHosSetRequest({ ...fieldValue, id })
      // console.log({ ...fieldValue, id });
      message.success("修改医院成功")
      navigate('/syt/hospital/hospitalSet')
    } else {
      addHospitalRequest(fieldValue)
      message.success("新增医院成功")
      navigate('/syt/hospital/hospitalSet')
    }
  }

  //返回按钮事件函数
  const goback = () => {
    navigate(-1)
  }


  return (
    <div>
      <Card>
        <Form
          form={form}
          name="basic"
          labelCol={{ span: 3 }}
          wrapperCol={{ span: 18 }}
          //组件封装 自动收集输入框内容 by name 提交表单且数据验证成功后回调事件
          onFinish={addHosFinishHandle}
        >
          <Form.Item
            label="医院名称"
            name="hosname"
            rules={[{
              required: true,
              message: 'Please input your 医院名称!',
              transform(value) {
                return value.trim()
              }
            }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="医院编号"
            name="hoscode"
            rules={[{
              required: true,
              message: 'Please input your 医院编号!',
              transform(value) {
                return value.trim()
              }
            }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="api基础路径"
            name="apiUrl"
            rules={[{
              required: true,
              message: 'Please input your api基础路径!',
              //验证是否有空格
              transform(value) {
                return value.trim()
              }
            }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="联系人姓名"
            name="contactsName"
            rules={[{
              required: true,
              message: 'Please input your 联系人姓名!',
              transform(value) {
                return value.trim()
              }
            }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="联系人手机"
            name="contactsPhone"
            rules={[{
              required: true,
              message: 'Please input your 联系人手机!',
              transform(value) {
                return value.trim()
              }
            }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            wrapperCol={{ offset: 3 }}
          >
            <Button type="primary" htmlType="submit" className={style.mr}>
              提交
            </Button>
            <Button type="default" htmlType="button" onClick={goback}>
              返回
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}













